translationHost#

The translationHost view modifier is used to provide a translation service context to your UI. This modifier enables user interaction with system-level translation dialogs, such as downloading required languages or selecting ambiguous source languages.

Purpose#

Apply the translationHost modifier to the root view of your page when using the Translation class for localized translations. It ensures that:

• If the source or target language is not currently available on the device, the system will prompt the user to download the necessary language resources.
• If the source language is not specified and cannot be inferred from the text content, the system will prompt the user to select a source language.

Without applying this modifier, such user prompts may not function correctly, and your translation session may fail silently or throw an error.

Type#

1translationHost?: Translation

The value of this modifier must be an instance of the Translation class.

Usage Example#

1function View() {
2  const translation = useMemo(() => new Translation(), [])
3  const [translated, setTranslated] = useState<Record<string, string>>({})
4  const texts = ["Hello", "Goodbye"]
5  
6  useEffect(() => {
7    translation.translateBatch({
8      texts,
9      source: "en",
10      target: "fr"
11    }).then(result => {
12      const map: Record<string, string> = {}
13      result.forEach((item, index) => {
14        map[texts[index]] = item
15      })
16      setTranslated(map)
17    })
18  }, [])
19
20  return <VStack translationHost={translation}>
21    {texts.map(text => (
22      <Text key={text}>
23        {translated[text] || text}
24      </Text>
25    ))}
26  </VStack>
27}

In this example:

• A Translation instance is created using useMemo.
• A batch of English texts is translated to French.
• The VStack view is wrapped with the translationHost modifier so the system can show download or language selection prompts if necessary.

Best Practices#

• Always apply translationHost to the top-level container view when performing translation-related operations.
• Use a consistent Translation instance that matches the one used for calling .translate() or .translateBatch().
• Avoid creating multiple Translation instances for the same session if possible.